//@import 'normalize.css';
@import './reset';

@import 'element-plus/theme-chalk/src/display';
@import 'element-plus/theme-chalk/src/index';

@import 'remixicon/fonts/remixicon.css';

@import './var';
@import "./element.over";
@import './common';
@import './plain';

@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(#909399, 0.3);
    border-radius: var(--el-border-radius-round);
    transition: var(--el-transition-duration) background-color;

    &:hover {
      background-color: rgba(#909399, 0.5);
    }
  }
}

:root {
  --el-margin: 10px !important;
  --el-padding: 10px !important;
  --el-footer-height: 40px !important;
}

html > body {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;

  font-size: var(--el-font-size-default);
  color: var(--el-color-black);
  background: var(--el-background-color);

  &.color-weakness {
    filter: invert(80%);
  }

  * {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;

    @include base-scrollbar;
  }

  /*a标签 */
  a {
    color: var(--el-color-primary);
    text-decoration: none;
  }

  /*图片 */
  img {
    object-fit: cover;

    &[src=''],
    &:not([src]) {
      opacity: 0;
    }
  }

  [class*='ri-'] {
    cursor: pointer;
  }

  #app {
    height: 100vh;

    @include base-scrollbar;

    &:not([class*='el-scrollbar']) {
      transition: var(--el-transition);
    }

    .vip-ui {
      section,
      div:not(
          .el-drawer,
          .el-drawer *,
          .el-dialog,
          .el-dialog *,
          .el-message-box,
          .el-message-box *,
          .el-table,
          .el-table *,
          .el-carousel,
          .el-carousel *,
          .el-pagination,
          .el-pagination *,
          .el-slider,
          .el-slider *,
          .el-card,
          .el-card *,
          .split,
          .split *,
          .card-drag,
          .card-drag *,
          .global-animation-disabled,
          .global-animation-disabled *,
          .vab-magnifier,
          .vab-magnifier *
        ) {
        text-shadow: none;
        transition: var(--el-transition);
        -webkit-font-smoothing: antialiased;
      }
    }
  }

  .page-container {
    width: 100%;
    min-height: var(--el-container-height);
    height: var(--el-container-height);
    //background: unset !important;
    background: var(--el-background-color) !important;
    display: flex;
    flex-direction: column;
    //overflow: auto;
    //z-index: calc(var(--el-z-index) + 3) !important;

    .box-main {
      width: 100%;
      height: 100%;
      //flex: 1;
      display: flex;
      flex-flow: column;
      overflow: hidden;
    }
  }

  .auto-height-table-card {
    //height: 100%;
    flex: 1;
    margin-bottom: 0 !important;

    //> .el-card__body {
    //  width: 100%;
    //  height: 100%;
    //  display: flex;
    //  flex-flow: column;
    //  overflow: hidden;
    //}

    .el-table {
      //flex: 1;
      height: 100%;
    }
  }

  .auto-height-box {
    //height: 100%;
    flex: 1;
    width: 100%;
    overflow: hidden;
  }


  .no-background-container {
    padding: 0 !important;
    background: var(--el-background-color) !important;
    border: 0 !important;
  }

  /* 默认布局自动高度 */
  :not(.no-background-container).auto-height-container {
    display: flex;
    flex-direction: column;
    height: var(--el-container-height);

    //.el-table {
    //  flex: 1;
    //}

    .auto-height-box {
      flex: 1;
      padding: var(--el-padding);
      overflow-y: auto;

      > .el-row {
        margin-top: calc(0px - var(--el-margin));
      }
    }

    @media (max-width: 1024px) {
      height: auto;
    }
  }

  /* 左右布局自动高度 */
  .no-background-container.auto-height-container {
    .auto-height-card {
      margin-bottom: 0;

      > .el-card__body {
        display: flex;
        flex-direction: column;
        height: calc(var(--el-container-height) - 2px);

        .el-table {
          flex: 1;
        }
      }

      &.has-header {
        > .el-card__body {
          height: calc(var(--el-container-height) - 57px);
        }
      }
    }

    @media (max-width: 1024px) {
      margin-bottom: calc(0 - var(--el-margin));

      > .el-row {
        > .el-col + .el-col {
          .auto-height-card {
            margin-bottom: 0;
          }
        }
      }

      .auto-height-card {
        margin-bottom: var(--el-margin);

        > .el-card__body {
          &:not(:has(.el-alert)) {
            height: auto;
          }
        }

        &.has-header {
          margin-bottom: 0;

          > .el-card__body {
            height: auto;
            min-height: calc(var(--el-container-height) - 57px);
          }
        }
      }
    }
  }

  :not(.auto-height-container).no-background-container {
    > .el-row:has(.el-card) {
      margin-bottom: calc(0px - var(--el-margin));
    }
  }

  .box-card {
    .el-tabs {
      &__header {
        margin: 0 !important;
        padding: 0 var(--el-padding) !important;
      }

      &__nav-wrap::after {
        height: 0 !important;
      }

      &__item {
        //line-height: 50px !important;
        //height: 50px !important;
        line-height: var(--el-tabs-height) !important;
        height: var(--el-tabs-height) !important;
      }
    }
  }

  .dialog-body-no-padding-bottom {
    .el-dialog__body {
      padding-bottom: 0 !important;
    }
  }

  .card-body-no-padding-bottom {
    .el-card__body {
      padding-bottom: 0 !important;
    }
  }

  /* vip-table-expand */
  .vip-table-expand {
    padding: var(--el-padding);
    line-height: 30px;

    &-title {
      display: inline-block;
      width: 80px;
      font-weight: bold;
    }
  }

  /* 表格全屏 */
  .vip-table-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--el-z-index) + 3) !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: var(--el-padding) !important;
  }

  /* 数据大屏全屏 */
  .vip-data-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--el-z-index) + 3) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* vip-data-empty占位图 */
  .vip-data-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    //min-height: calc(var(--el-container-height));
    margin: auto;
  }

  /* vip-dropdown下拉动画 */
  .vip-dropdown {
    &-active {
      transform: rotateZ(180deg);
    }
  }

  /* vip-dot圆点动画 */
  .vip-dot {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    vertical-align: middle;
    border-radius: 50%;

    span {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: vabDot 1.2s ease-in-out infinite;
      @keyframes vabDot {
        0% {
          opacity: 0.6;
          transform: scale(0.8);
        }
        to {
          opacity: 0;
          transform: scale(2.4);
        }
      }
    }

    &-success {
      background: var(--el-color-success);

      span {
        background: var(--el-color-success);
      }
    }

    &-error {
      background: var(--el-color-error);

      span {
        background: var(--el-color-error);
      }
    }
  }

  .jv-container.jv-light {
    background: var(--el-color-white);

    .jv-key,
    .jv-item.jv-object {
      color: var(--el-color-black);
    }
  }

  /* 旋转动画 */
  .rotate {
    @keyframes rotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    animation: rotate 1s linear infinite;
  }

  /* nprogress进度条 */
  #nprogress {
    position: fixed;
    z-index: calc(var(--el-z-index) + 3);

    .bar {
      background: var(--el-color-primary);
    }

    .peg {
      box-shadow: 0 0 10px var(--el-color-primary),
      0 0 5px var(--el-color-primary);
    }
  }

  //.el-form--inline .el-form-item {
  //  & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
  //    min-width: 240px !important;
  //    //width: 240px !important;
  //  }
  //}

}

/* svg */
[fill='#6c63ff'],
[fill='#7CADF6'],
[fill='#1C85E8'],
[fill='#5CA4E6'] {
  fill: var(--el-color-primary) !important;
}

[fill='#5661AE'],
[fill='#465393'] {
  fill: var(--el-color-primary-light-1) !important;
}

[fill='#FEBB94'],
[fill='#BC775C'],
[fill='#E6A23C'] {
  fill: var(--el-color-warning) !important;
}


